<template>
	<view v-if="userInfo && userInfo.role" class="box screen-all flex">
		<view class="top-bg flex">
			<image class="top-bg-image" src="../../static/user_bg.png"></image>
			<view class="top-content flex">
				<view class="nav-view flex row aCenter">
					<view class="nav-left flex center">
						<!-- <image class="nav-left-icon" src="../../static/left.png"></image> -->
					</view>
					<view class="flex-1 flex center">
						<text class="nav-title">达人中心</text>
					</view>
					<view class="nav-left flex center">
						
					</view>
				</view>
				<view class="user-info-view flex row aCenter">
					<view class="head-view flex center">
						<image class="head-icon" :src="userInfo ? userInfo.avatar : ''"></image>
						<image v-if="userInfo && (userInfo.role == 2 || userInfo.role == 3)" class="head-kuang" src="../../static/head_kuang.png"></image>
					</view>
					<view class="head-info flex-1 flex">
						<view class="flex row aCenter">
							<text class="head-text text-ellipsis">{{userInfo && userInfo.nickname ? 
							(userInfo.nickname.length > 5 ? (userInfo.nickname.substring(0,5)) + '...': userInfo.nickname) : ''}}</text>
							<view class="head-tag"
								:class="[userInfo && userInfo.role == 3 ? 'head-tag-zhuli' : 'head-tag', 'head-tag']"
							>{{userInfo ? (userInfo.role == 2 ? '达人' : (userInfo.role == 3 ? '达人助理' : '普通用户')):'普通用户'}}</view>
							<view class="flex-1"></view>
						</view>
						<text class="head-text">{{userInfo ? userInfo.mobile : ''}}</text>
					</view>
					<view v-if="userInfo && userInfo.role == 2" class="target-view flex center" @click="onItemClick(4)">
						<text class="target-text">本月选择指标</text>
						<view class="target-num">{{userInfo && userInfo.achievement ? userInfo.achievement : '未选择'}}</view>
					</view>
				</view>
				<view class="user-table-view flex row center">
					<image v-if="userInfo && userInfo.role == 2" class="wall-icon" src="../../static/wall.png" @click="onItemClick(5)"></image>
					<text v-if="userInfo && userInfo.role == 2" class="wall-price" @click="onItemClick(5)">我的钱包：</text>
					<text v-if="userInfo && userInfo.role == 2" class="wall-price" @click="onItemClick(5)">{{userInfo ? userInfo.money : ''}}</text>
					<view v-if="userInfo && userInfo.role == 2" class="line-wall"></view>
					<view class="yuding-view flex center" @click="goReserve()">桌位预定</view>
				</view>
			</view>
		</view>
		<!-- 桌位预定 -->
		<!-- <view class="reserve-btn-view flex center">
			<image class="reserve-btn" src="../../static/yuding.png" @click="goReserve()"></image>
		</view> -->
		<!-- 业绩 -->
		<view class="content-yj flex center">
			<view class="content-item flex" @click="onItemClick(3)">
				<view class="content-item-title flex row aCenter">
					<view class="cnt-line"></view>
					<text class="cnt-tongji">我的业绩统计</text>
					<image class="right" src="../../static/right.png"></image>
				</view>
				<view class="flex row center">
					<view class="cnt-item flex-1 flex center">
						<text class="cnt-num">{{userInfo && userInfo.today_achievement ? userInfo.today_achievement : '0'}}</text>
						<text class="cnt-text">今日业绩</text>
					</view>
					<view class="cnt-view-line"></view>
					<view class="cnt-item flex-1 flex center">
						<text class="cnt-num">{{userInfo && userInfo.mon_achievement ? userInfo.mon_achievement : '0'}}</text>
						<text class="cnt-text">本月业绩</text>
					</view>
					<view class="cnt-view-line"></view>
					<view class="cnt-item flex-1 flex center">
						<text class="cnt-num">{{userInfo && userInfo.total_achievement ? userInfo.total_achievement : '0'}}</text>
						<text class="cnt-text">总业绩</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content-yj-b flex center">
			<view class="content-item flex" @click="onItemClick(2)">
				<view class="content-item-title flex row aCenter">
					<view class="cnt-line"></view>
					<text class="cnt-tongji">团队业绩统计</text>
					<image class="right" src="../../static/right.png"></image>
				</view>
				<view class="flex row center">
					<view class="cnt-item flex-1 flex center">
						<text class="cnt-num">{{userInfo && userInfo.group_today_achievement ? userInfo.group_today_achievement : '0'}}</text>
						<text class="cnt-text">今日业绩</text>
					</view>
					<view class="cnt-view-line"></view>
					<view class="cnt-item flex-1 flex center">
						<text class="cnt-num">{{userInfo && userInfo.group_mon_achievement ? userInfo.group_mon_achievement : '0'}}</text>
						<text class="cnt-text">本月业绩</text>
					</view>
					<view class="cnt-view-line"></view>
					<view class="cnt-item flex-1 flex center">
						<text class="cnt-num">{{userInfo && userInfo.group_total_achievement ? userInfo.group_total_achievement : '0'}}</text>
						<text class="cnt-text">总业绩</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 业绩选择弹窗 -->
		<uni-popup ref="popup" type="center" :maskClick="false">
			<view class="flex center">
				<view class="pop-con-view flex">
					<view class="pop-title-view flex row aCenter">
						<view class="pop-title-line"></view>
						<text class="pop-title-text">选择本月业绩指标</text>
					</view>
					<view :class="[item.active ? 'pop-item-view-active':'pop-item-view', 'flex center']" 
					v-for="(item,index) in achieveList" :key="index" @click.stop="selectYeji(item)">
						{{item.achievement}}
					</view>
				</view>
				
				<view class="btn-view flex row center">
					<view class="btn-submit flex center" @click.stop="submit">确定</view>
				</view>
				
				<view class="xieyi-view flex row aCenter" @click="xieyi">
					<image v-if="xieyiType == 0" class="xieyi-radio" src="../../static/radio_n.png"></image>
					<image v-if="xieyiType == 1" class="xieyi-radio" src="../../static/radio_s.png"></image>
					<text class="xieyi-text">阅读并同意</text>
					<text class="xieyi-book" @click.stop="openXieyi">《业绩协议》</text>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		data() {
			return {
				userInfo: {},
				achieveList: [],
				
				xieyiType: 0,
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		onShow() {
			this.getUserInfo();
			console.log('页面显示 自动弹出 显示');
			// this.autoOpenachi();
		},
		onHide() {
			console.log('页面隐藏 自动弹出 卸载');
			this._achiTime && clearInterval(this._achiTime);
		},
		onUnload() {
			console.log('页面卸载 自动弹出 卸载');
			this._achiTime && clearInterval(this._achiTime);
		},
		methods: {
			xieyi () {
				this.xieyiType = !this.xieyiType;
			},
			openXieyi () {
				//打开协议详情
				uni.navigateTo({
					url: './xieyi-page',
				})
			},
			autoOpenachi(){
				let that = this;
				this._achiTime && clearInterval(this._achiTime);
				this._achiTime = setInterval(()=>{
					if(that.userInfo && that.userInfo.achievement){
						console.log('自动弹出卸载');
						that._achiTime && clearInterval(that._achiTime);
					}else{
						console.log('自动弹出运行中');
						this.getUserInfo();
					}
				}, 1000);
				
				// console.log('time===', moment().day(), moment().hour());
				
				// if(moment().day() == 1 && moment().hour() >= 10){
				// 	console.log('自动弹出验证成功');
					
				// }else{
					
				// }
			},
			goReserve () {
				//前往预定列表页面
				uni.navigateTo({
					url: './reserve-list'
				})
			},
			getUserInfo () {
				let params = {
					token: uni.getStorageSync("token"),
				}
				console.log(params);
				this.$request("api/user/daren_message", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							this.userInfo = data;
							
							if(data.role == 2){
								// 是达人 且，本月未选业绩的情况下，弹出选择业绩
								// if(!data.achievement || data.status == 0){
								if(!data.achievement){
									//自动弹出选择业绩
									this.onItemClick(4);
								}
							}else if(data.role == 3){
								
							}else{
								uni.reLaunch({
									url: './apply'
								})
							}
						}else{}
					}).catch((e) => {
						console.log(e);
					});
			},
			onItemClick (type) {
				switch (type) {
					case 1:
						// 桌位预定
						uni.navigateTo({
							url: './reserve?type=2'
						})
						break;
					case 2:
						// 团队业绩
						uni.navigateTo({url:"achievement-team"});
						break;
					case 3:
						// 我的业绩
						uni.navigateTo({url:"achievement"});
						break;
					case 4:
						// 选择业绩
						this.getAchieve();
						break;
					case 5:
						// 我的钱包
						uni.navigateTo({url:"wallet"});
						break;
					case 6:
						
						break;
				}
			},
			selectYeji (obj) {
				console.log(obj);
				let _list = [...this.achieveList];
				this.achieveList = _list.map((item,index)=>{
					if(item.id == obj.id){
						item.active = true;
					}else{
						item.active = false;
					}
					return item;
				});
			},
			submit () {
				if(!this.xieyiType){
					uni.showToast({
						title: '请阅读并同意《业绩协议》！', icon: 'none'
					})
					return ;
				}
				
				let _list = this.achieveList;
				let isSelect = false;
				let isSelectItem;
				_list.forEach((item)=>{
					if(item.active){
						isSelect = true;
						isSelectItem = item;
					}
				});
				if(!isSelect){
					uni.showToast({
						title: '请先选择业绩！', icon: 'none'
					})
					return ;
				}
				uni.showToast({ title: '加载中...', icon: 'loading', duration: 10000  });
				//api/user/add_achievement
				let params = {
					token: uni.getStorageSync("token"),
					id: isSelectItem.id,
				}
				console.log(params);
				this.$request("api/user/add_achievement", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						uni.hideToast();
						if(code == 1){
							this.$refs.popup.close();
							this.getUserInfo();
							this.openXieyi();
							uni.showToast({ title: msg, icon: 'none' });
						}else{
							uni.showToast({ title: msg, icon: 'none' });
						}
					}).catch((e) => {
						uni.hideToast();
						console.log(e);
					});
			},
			getAchieve(){
				if(this.userInfo.role == 3){
					uni.showToast({ title: '达人助理无需选择业绩', icon: 'none'  });
					return ;
				}
				
				if(this.userInfo.achievement){
					this.openXieyi();
					return;
				}
				
				uni.showToast({ title: '加载中...', icon: 'loading', duration: 10000  });
				//api/user/achievement_list
				let params = {
					token: uni.getStorageSync("token"),
				}
				console.log(params);
				this.$request("api/user/achievement_list", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						uni.hideToast();
						if(code == 1){
							this.achieveList = data;
							// achievement: 30000
							// id: 1
							this.$refs.popup.open();
						}else{
							uni.showToast({ title: msg, icon: 'none' });
						}
					}).catch((e) => {
						uni.hideToast();
						console.log(e);
					});
			}
		}
	}
</script>

<style scoped>
	.box {
		background-color: #010B24;
	}
	.top-bg {
		width: 100%;
		height: 485rpx;
		position: relative;
	}
	.top-bg-image {
		width: 100%;
		height: 485rpx;
		position: absolute;
	}
	.top-content {
		width: 100%;
		position: absolute;
	}
	.nav-view {
		width: 100%;
		height: 100rpx;
	}
	.nav-left {
		width: 100rpx;
		height: 100rpx;
	}
	.nav-left-icon {
		width: 40rpx;
		height: 40rpx;
	}
	.nav-title {
		font-size: 30rpx;
		color: #FFF;
	}
	.user-info-view {
		margin-top: 47rpx;
		margin-bottom: 20rpx;
	}
	.head-view {
		width: 108rpx;
		height: 108rpx;
		margin-left: 46rpx;
		margin-right: 18rpx;
		position: relative;
	}
	.head-icon {
		width: 98rpx;
		height: 98rpx;
		border-radius: 50rpx;
	}
	.head-kuang {
		width: 108rpx;
		height: 108rpx;
		position: absolute;
		top: 0;
	}
	.head-text {
		font-size: 30rpx;
		color: #FFF;
	}
	.user-table-view {
		width: 100%;
		height: 150rpx;
		padding: 0 36rpx;
	}
	.user-table {
		flex: 1;
	}
	.user-table-border {
		width: 1rpx;
		height: 60rpx;
		background-color: #FFFFFF;
	}
	.ut-price {
		font-size: 32rpx;
		color: #FFF;
	}
	.ut-hint {
		font-size: 26rpx;
		color: #FFF;
		margin-top: 10rpx;
	}
	.reserve-btn-view {
		width: 100%;
	}
	.target-view {
		margin-right: 36rpx;
	}
	.reserve-btn {
		width: 690rpx;
		height: 92rpx;
		margin-top: -50rpx;
	}
	.target-text {
		font-size: 28rpx;
		color: #FFF;
	}
	.target-num {
		font-size: 28rpx;
		color: #FFF;
		padding: 7rpx 36rpx;
		border-radius: 50rpx;
		background-color: #6A45C3;
		margin-top: 12rpx;
	}
	.head-tag {
		padding: 4rpx 20rpx;
		background-color: #FFBC3C;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #010B24;
		margin-left: 12rpx;
	}
	.head-tag-zhuli {
		padding: 4rpx 20rpx;
		background-color: #FF8F86;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #010B24;
		margin-left: 12rpx;
	}
	.wall-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 18rpx;
	}
	.yuding-view {
		width: 175rpx;
		height: 55rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #744ECD;
	}
	.line-wall {
		width: 1rpx;
		height: 34rpx;
		background-color: #FFF;
		margin: 0 70rpx;
	}
	.wall-price {
		font-size: 28rpx;
		color: #FFF;
	}
	.content-yj {
		width: 100%;
		margin-top: -78rpx;
		z-index: 9;
	}
	.content-yj-b {
		width: 100%;
		margin-top: 30rpx;
		z-index: 9;
	}
	.content-item {
		width: 680rpx;
		border-radius: 16rpx;
		background-color: #FFF;
		padding: 20rpx 30rpx;
	}
	.cnt-line {
		width: 5rpx;
		height: 27rpx;
		background-color: #682CE1;
	}
	.cnt-tongji {
		flex: 1;
		font-size: 28rpx;
		color: #212121;
		margin-left: 12rpx;
	}
	.right {
		width: 28rpx;
		height: 28rpx;
	}
	.content-item-title {
		border-bottom: 1rpx solid #EFEFEF;
		padding-bottom: 18rpx;
	}
	.cnt-item {
		height: 120rpx;
	}
	.cnt-num {
		font-size: 28rpx;
		color: #121212;
		margin-top: 11rpx;
	}
	.cnt-text {
		font-size: 28rpx;
		color: #121212;
		margin-top: 6rpx;
	}
	.cnt-view-line {
		width: 1rpx;
		height: 55rpx;
		background-color: #EFEFEF;
	}
	.pop-con-view {
		width: 620rpx;
		min-height: 100rpx;
		max-height: 600rpx;
		overflow: auto;
		padding: 0 30rpx 30rpx 30rpx;
		border-radius: 20rpx;
		background-color: #FFF;
	}
	.pop-title-view {
		width: 100%;
		height: 80rpx;
	}
	.pop-title-line {
		width: 7rpx;
		height: 31rpx;
		background-color: #6A45C3;
		border-radius: 4rpx;
		margin-right: 12rpx;
	}
	.pop-title-text {
		font-size: 28rpx;
		color: #010B24;
	}
	.pop-item-view {
		width: 548rpx;
		height: 86rpx;
		background-color: #F2F2F2;
		border-radius: 43rpx;
		margin-bottom: 14rpx;
		margin-top: 14rpx;
		font-size: 28rpx;
		color: #121212;
	}
	.pop-item-view-active {
		width: 548rpx;
		height: 86rpx;
		border-radius: 43rpx;
		margin-bottom: 14rpx;
		margin-top: 14rpx;
		font-size: 28rpx;
		background-color: #6A45C3;
		color: #FFFFFF;
	}
	.xieyi-text {
		font-size: 26rpx;
		color: #FFF;
	}
	.xieyi-book {
		font-size: 26rpx;
		color: #55DBFC;
	}
	.xieyi-radio {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
		margin-top: 1rpx;
	}
	.xieyi-view {
		margin-top: 30rpx;
	}
	
	
	.btn-view {
		width: 100%;
		margin-top: 40rpx;
	}
	.btn-submit {
		width: 616rpx;
		height: 93rpx;
		background-color: #FFF;
		border-radius: 47rpx;
		font-size: 28rpx;
		color: #121212;
	}
	.btn-submit:active {
		background-color: #FFFFFFEE;
	}
</style>
